pug 基礎介紹(1) DAY99

pug jade

皮傑先生 2020-12-23 19:50:06 ‧ 2105 瀏覽

分享至

pug 前身就是 jade (改名而已)

這裡我們來看 pug 的基礎寫法

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
        link(rel="stylesheet", href="stylesheet/all.css")
        script(src="js/all.js")
    body
    h1 
        span bb
        | cc
    br 
    | con

html呈現為

會發現 pug 沒有結尾標籤
而是利用一個 tab 來區隔

當然 pug 也可利用 emmet 來撰寫
輸入 ul>li*3>a{link} 並按下 tab

 ul
        li
            a(href="") link
        li
            a(href="") link
        li
            a(href="") link

若要加 class 該怎麼加呢??

.container
        form(action="")
            label(for="email") 請輸入email
            input#email.form-control(type="text")

這裡要注意 id 的寫法 #email

且 input 這裡的class 還有另一種寫法(寫在括號內)

    .container
        form(action="")
            label(for="email") 請輸入email
            input#email(type="text" class="form-control")

h1: a(href=""): span 連結

 h1
    a(href="")
        span 連結

上述這兩種結果會是一樣的
如果不想寫這麼多層可以加上冒號(:)

這裡也介紹一個 html 快速轉換為 pug的工具
https://html-to-pug.com/

製作 HTML 樣板

在我們製作樣板的時候
會用到一些語法

include (載入外部區塊)

block

作為其他頁面的內容顯示區域
與 Extend 一起使用

extend
-將其他頁面做為延伸
-內容會在 block 出現

這裡我們先介紹 include
這裡我們把 head 的內容儲存成 head.jade
並在source下開一個 partials資料夾
儲存於此

head.jade

meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
link(rel="stylesheet", href="stylesheet/all.css")
script(src="js/vendors.js")

navbar 也是
navbar.jade

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
            a.navbar-brand(href='#') Navbar
            button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation')
                span.navbar-toggler-icon
            #navbarNav.collapse.navbar-collapse
                ul.navbar-nav
                    li.nav-item.active
                        a.nav-link(href='#')
                        | Home 
                        span.sr-only (current)

接著在 index.jade
加入 include

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade

這樣 include 就完成了~~

再來要介紹 block 與 extend (block 會與 extend 一起使用)

我們先開一個 layout.jade 放在 source 資料夾內
並將 index.jade 的

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade

剪下貼上並加上 block content
結果(layout.jade)

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade
        block content

所以這時候我們 index.jade 只剩下原本的內容

h1 
    span bb
    | cc
    br 
    | con
    ul
        li
            a(href="") link
        li
            a(href="") link
        li
            a(href="") link
    h1: a(href=""): span 連結
    h1
        a(href="")
            span 連結
    .container
        form(action="")
            label(for="email") 請輸入email
            input#email(type="text" class="form-control")

這裡就開始有關於 extend 啦
我們必須把 index.jade 延伸到 layout.jade上
並要用 block content 來標出你要延伸的內容(記得加上後內容要縮排)

extend layout.jade
block  content

    h1 
        span bb
        | cc
        br 
        | con
        ul
            li
                a(href="") link
            li
                a(href="") link
            li
                a(href="") link
        h1: a(href=""): span 連結
        h1
            a(href="")
                span 連結
        .container
            form(action="")
                label(for="email") 請輸入email
                input#email(type="text" class="form-control")

且我們可以再增加一個 block (ex: block navbar)

extend layout.jade

block  navbar
    include partials/navbar.jade
block  content

    h1 
        span bb
        | cc
        br 
        | con
        ul
            li
                a(href="") link
            li
                a(href="") link
            li
                a(href="") link
        h1: a(href=""): span 連結
        h1
            a(href="")
                span 連結
        .container
            form(action="")
                label(for="email") 請輸入email
                input#email(type="text" class="form-control")

別忘了在layout.jade 上也要增加 (block navbar)

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade
        block content
        block navbar

那今天的介紹就到這裡
若有任何問題或內容有誤
都可以跟我說唷